<!--
 * @docName: electronicPasswords.vue
 * @Author: mwl
 * @Date: 2023/12/21
 * @LastEditors: zhongxiong
 * @LastEditTime: 13:56
-->
<!-- actionType:1,//1，新增（提交），2，经营者修改(特殊处理提交)，3，密码管理（提交&删除）-->
<template>
<div>
  <div class='inquire-content'>
    <a-radio-group v-model="operator" @change="onChange">
      <a-radio :value="0">经营者</a-radio>
      <a-radio :value="1">办税员</a-radio>
      <a-radio :value="2">开票员</a-radio>
      <a-radio disabled :value="3">财务负责人</a-radio>
    </a-radio-group>
    <a-button type="primary" v-has="'ee_de11:click:dzswjmmxzmmsz'" @click="openModalFun('1')">新增密码设置</a-button>
  </div>
  <a-table
    bordered
    :pagination="false"
    :columns="columns"
    :data-source="tableData"
    :loading="loading"
    :scroll="{x:800}"
  >
    <span slot="type" slot-scope="text, record">
      {{{ 0: '经营者',1: '办税员', 2: '开票员', 3: '财务负责人', }[text] }}
    </span>
    <span slot='password' slot-scope="text, record">
          <visibleAndHidden :value='text'></visibleAndHidden>
    </span>
    <span slot="status" slot-scope="text, record">
      <a-tag :color="{ 0: '#d9d9d9',1: '#ffac56', 2: '#f50', 3: '#d9d9d9', 3: '#d9d9d9' }[text] ">
        {{{ 0: '未设置',1: '使用中', 2: '密码错误', 3: '已删除', 4: '已停用', }[text] }}
      </a-tag>
    </span>
    <span slot="action" slot-scope="text, record">
      <a href="javascript:;" v-has="'ee_de11:click:dzswjmmcz'" @click="openModalFun(record.type=='0'?'2':'3',record)">{{ { 0: '密码管理',1: '密码管理', 2: '修改密码', 3: '已删除', }[record.status] }}</a>
    </span>
  </a-table>
  <a-modal :destroyOnClose="true" :width="720" :title="'电子税务局登录密码'+{1: '设置',2: '更新',3: '管理'}[actionType]" :visible="previewVisible" :footer="null" @cancel="handleCancel()">
    <a-form-model
      auto-fill-disabled="true"
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="登录身份" prop="type">
        <a-radio-group v-model="form.type" @change='onRadioChange'>
          <a-radio v-if='actionType == 2' :value="0">经营者</a-radio>
          <a-radio v-if='actionType != 2' :value="1">办税员</a-radio>
          <a-radio v-if='actionType != 2' :value="2">开票员</a-radio>
          <a-radio v-if='actionType != 2' disabled :value="3">财务负责人</a-radio>
        </a-radio-group>
      </a-form-model-item>
        <a-form-model-item label="登录人姓名" prop="name">
          <a-input :disabled='actionType !=1' v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="身份证号" prop="idCard">
          <a-input :disabled='actionType !=1' v-model="form.idCard" />
        </a-form-model-item>
        <a-form-model-item label="实名手机号" prop="phone">
          <a-input :disabled='actionType !=1' v-model="form.phone" autoComplete="off" />
        </a-form-model-item>
        <a-form-model-item label="所属单位">
          <a-input disabled v-if='form.type == 0' v-model="form.entName" autoComplete="off" />
          <a-input disabled v-else v-model="form.channelName" autoComplete="off" />
        </a-form-model-item>
      <a-form-model-item label="电子税务局登录密码" prop="password">
<!--        <a-input-password v-model="form.password" />-->
        <form-Password :form="form" :initialize="form.phone ? true : false" />
      </a-form-model-item>
    </a-form-model>
    <div class='but-div'>
      <a-button type="primary" @click="onSubmit">
        提交
      </a-button>
      <a-button v-if="actionType == '3'" style="margin-left: 10px;" @click="resetForm">
        删除此角色
      </a-button>
    </div>
  </a-modal>
</div>
</template>

<script>
import {
  electronTaxPasswordList,
  electronTaxPasswordSave,
  electronTaxPasswordUpdate, electronTaxPasswordUpdateStatus
} from '@api/electronicPasswordsApi'
import visibleAndHidden from '@/views/electronicPasswords/visibleAndHidden'
import { cloneObject } from '@/utils/util'

export default {
  name: 'electronicPasswords',
  props:{
   entId:{ type: [String,Number] },
   entName:{type:[String,Number]}
  },
  components:{
    visibleAndHidden
  },
  data() {
    return {
      actionType:1,//1新增，2，经营者修改，3密码管理
      operator:0,
      loading: true,
      selectedData:{},
      tableData:[],
      columns:[
        {
          title: '登录身份',
          dataIndex: 'type',
          align: 'center',
          scopedSlots: { customRender: 'type' },
        },
        {
          title: '姓名',
          dataIndex: 'name',
          align: 'center',
        },
        {
          title: '身份证号',
          dataIndex: 'idCard',
          align: 'center',
        },
        {
          title: '实名手机号',
          dataIndex: 'phone',
          align: 'center',
        },
        {
          title: '更新日期',
          dataIndex: 'updateTime',
          align: 'center',
        },
        {
          title: '密码',
          dataIndex: 'password',
          align: 'center',
          scopedSlots: { customRender: 'password' },
        },
        {
          title: '密码状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 160,
        }
      ],
      previewVisible:false,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      other: '',
      form: {
        id:'',
        type: '',
        name: '',
        idCard:'',
        phone:'',
        password:''
      },
      rules: {
        type:[
          { required: true, message: '请选择登录身份', trigger: 'change' },
        ],
        name: [
          { required: true, message: '请选择登录人姓名', trigger: 'blur'},
        ],
        idCard: [{ required: true, message: '请输入身份证号', trigger: 'blur' },{ validator:this.handleCardNum}],
        phone: [{ required: true, message: '请输入实名手机号' , trigger: 'blur'},{ validator: this.validatePhone }],
        password: [{ required: true, message: '请输入电子税务局登录密码', trigger: 'blur' }],
      },
    }
  },
  created() {
  },
  mounted() {
    this.electronTaxPasswordListFun(this.operator)
  },
  methods:{
    onRadioChange(e){
      console.log('radio checked', e.target.value);
    },
    electronTaxPasswordListFun(type){
      this.loading = true;
      let typeList = [];
      typeList.push(type);
      let params = {};
      params.data = {
        entId: this.entId,
        typeList:typeList
      }
      params.pageNo = 1;
      params.pageSize = 100000;
      electronTaxPasswordList(params).then(res => {
        if (res.success) {
          this.loading = false;
          this.tableData = res.result.records || [];

        }else{
          this.$message.warning(res.message)
        }
      })
    },
    onChange(e) {
      console.log('radio checked', e.target.value);
      this.operator = e.target.value;
      this.electronTaxPasswordListFun(this.operator)
    },
    openModalFun(type,data){
      this.actionType = type;
      if(data){
        this.form = cloneObject(data);
      }else{
        this.form = {};
      }
      this.form.entName = this.entName;
      this.form.channelName = '渠道'
      console.log(this.form.entName)
      this.previewVisible = true;
    },
    handleCancel(){
      this.previewVisible = false;
      this.form = {}
    },
    onSubmit() {
      console.log(this.actionType)
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let params = {};
          this.form.entId = this.entId;
          params = cloneObject(this.form);
          params.source = 1;
          params.showFlag = 1;

          console.log('params',params)
          if(this.actionType == '1') {
            //新增
            params.bizType = 2;
            electronTaxPasswordSave(params).then(res => {
              if (res.success) {
                this.$message.success('提交成功！')
                this.previewVisible = false;
                this.form = {}
                this.electronTaxPasswordListFun(this.operator)
              } else {
                this.$message.warning(res.message)
              }
            })
          }else{
            //修改
            electronTaxPasswordUpdate(params).then(res => {
              if (res.success) {
                this.$message.success('提交成功！')
                this.previewVisible = false;
                this.form = {}
                this.electronTaxPasswordListFun(this.operator)
              } else {
                this.$message.warning(res.message)
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      let params = {};
      this.form.status = 3;
      params = cloneObject(this.form);
      console.log('params',params)
      //删除
      electronTaxPasswordUpdateStatus(params).then(res => {
        if (res.success) {
          this.$message.success('删除成功！')
          this.previewVisible = false;
          this.form = {}
          this.electronTaxPasswordListFun(this.operator)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 校验手机号
    validatePhone(rule, value, callback) {
      let reg = /^(1\d{10})$/;
      if (!value || reg.test(value)) {
        callback();
      } else {
        callback("您的手机号码格式不正确!");
      }
    },
    // 校验身份证号
    handleCardNum(rule, value, callback) {
      var reg =
        /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/
      if (!reg.test(value)) {
        callback(new Error('请输入正确身份证号'))
      } else {
        callback()
      }
    },
  }
}
</script>

<style scoped lang='less'>
  .inquire-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 ;
  }
  /deep/ .ant-modal-title{
    font-size: 16px;
  }
  .but-div{
    text-align: center;
    padding: 20px 20px 10px;
    .ant-btn{
      padding: 0 30px;
    }
  }
</style>
